<template>
    <div class="main">
        <section>
            <div v-if="rightsButtons['add']" class="btn-block">
                <router-link :to="{path: 'article/add',query: {id: '' }}">
                    <el-button type="success" size="small" icon="el-icon-circle-plus" plain >新建文章</el-button>
                </router-link>
            </div>
            <el-form ref="searchForm" class="search-block" :model="listQuery" label-position="right" label-width="96px">
                <el-row :gutter="50">
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                        <el-form-item label="名称：" prop="keyword">
                           <el-input v-model="listQuery.keyword" placeholder="请输入文章名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                        <el-form-item label="分组:" prop="groupId">
                            <el-select v-model="listQuery.groupId" clearable @change="search">
                                <el-option  :label="group.name" :value="group.id" v-for="(group,index) in groupList" :key="index"></el-option>     
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                        <el-form-item label="是否推荐:" prop="recommendType">
                            <el-select v-model="listQuery.recommendType" clearable @change="search">
                                <el-option  label="推荐" :value="1"></el-option>  
                                <el-option  label="不推荐" :value="0"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                        <el-form-item label="是否置顶:" prop="topType">
                            <el-select v-model="listQuery.topType" clearable @change="search">
                                <el-option  label="置顶" :value="1"></el-option>  
                                <el-option  label="不置顶" :value="0"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                        <el-form-item label="创建时间：" prop="name">
                           <el-date-picker
                            v-model="rangeTime"
                            type="daterange"
                            range-separator="至"
                            value-format="yyyy-MM-dd"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="" class="btn-item">
                    <el-button type="primary" size="mini" icon="el-icon-search" plain @click="search">搜索</el-button>
                    <span class="btn-reset" @click="resetForm('searchForm')">清空搜索条件</span>
                </el-form-item>
            </el-form>
            <div style="margin:0 0 10px 15px;color:#e6a23c">提示：最少设置3篇推荐文章</div>
            <el-table :data="list" v-loading="listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
                <el-table-column align="center" type="index" label="序号" width="80"></el-table-column>
                <el-table-column align="center" label="文章标题">
                    <template slot-scope="scope">
                        <div style="width:100%">
                            <el-row type="flex" align="middle" style="margin-bottom:0">
                                <el-col :span="10" v-if="scope.row.channelId !== 4">
                                    <img :src="JSON.parse(scope.row.articleCoverInfo).resourceUrl" alt=""  class="resourceImg"/>
                                </el-col>
                                <el-col :span="10" v-else>
                                    <img :src="JSON.parse(scope.row.posterCoverInfo).resourceUrl" alt=""  class="resourceImg"/>
                                </el-col>
                                <el-col :span="14"><span>{{scope.row.title}}</span></el-col>
                            </el-row>
                        </div>  
                    </template>
                </el-table-column>
                <el-table-column align="center" label="文章分组" prop="groupName"></el-table-column>
                <el-table-column align="center" label="文章排序" prop="sort"></el-table-column>
                <el-table-column align="center" label="创建时间" prop="createdAt"></el-table-column>
                <el-table-column align="center" label="操作" width="300" v-if="rightsButtons['edit'] || rightsButtons['setRecommend'] || rightsButtons['delete'] || rightsButtons['top']">
                    <template slot-scope="scope">
                        <el-button v-if="rightsButtons['edit']" type="primary" size="mini"  @click="$router.push({ path: 'article/edit', query: {id: scope.row.id } })" >编辑</el-button>
                        <el-button v-if="rightsButtons['setRecommend']" type="primary" size="mini"  @click="setRecommend(scope.row)" >{{scope.row.recommendType === 0 ? '设为推荐' : '取消推荐'}}</el-button>
                        <el-button v-if="rightsButtons['delete']" type="delete" size="mini" @click="deleteArticle(scope.row.id)" >删除</el-button>
                        <el-button v-if="rightsButtons['top']" type="primary" size="mini" @click="handleToTop(scope.row)" >{{scope.row.topType === 0 ? '置顶' : '取消置顶'}}</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="listQuery.pageNum"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="listQuery.pageSize"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listTotal">
            </el-pagination>
        </section>
    </div>
</template>
<script>
    // import { debounce } from  '../../../utils/index';
    export default {
        name: 'article',
        data(){
            return {
                listQuery: {
                    pageNum: 1,
                    pageSize: 10,
                    keyword:'',
                    groupId:'',
                    endTime:'',
                    startTime:'',
                    recommendType:'',
                    topType: ''
                },
                rangeTime:[],
                listLoading: false,
                list: [],
                listTotal: 0,
                btnLoading: false,
                groupList:[]
            }
        },
        created(){
            if (this.$store.getters.cachedViews.length === 0) {
              this.getList()
              this.getTagGroup()
            }
        },
        activated(){
            this.getList()
            this.getTagGroup()
        },
        methods: {
            // 搜索
            search() {
                this.listQuery.pageNum = 1
                this.getList()
            },
            getList(){
                this.listLoading = true
                if(this.rangeTime){
                    if(this.rangeTime.length>0){
                        this.listQuery.startTime = this.rangeTime[0]
                        this.listQuery.endTime = this.rangeTime[1]
                    } else {
                        this.listQuery.startTime = ''
                        this.listQuery.endTime = ''
                    }
                }else {
                   this.listQuery.startTime = ''
                   this.listQuery.endTime = '' 
                }
                this.request({
                    url: '/bus-article/search',
                    method: 'post',
                    data: this.listQuery
                }).then((res) => {
                    this.list = res.data.list
                    this.listTotal = res.data.total
                    this.listLoading = false
                }).catch(err => {
                    console.log(err);
                    this.list = [];
                    this.listTotal = 0;
                    this.listLoading = false;
                });
            },
            handleSizeChange (value) {
                this.listQuery.pageSize = value
                this.getList()
            },
            handleCurrentChange(val){
                this.listQuery.pageNum = val;
                this.getList();
            },
            // 清空搜索条件
            resetForm (formName) {
                this.rangeTime = []
                this.$nextTick(() => {
                    this.$refs[formName].resetFields()
                })
            },
            deleteArticle(id){
                this.$confirm('删除操作, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.request({
                        url: '/bus-article/delete?id='+id,
                        method: 'delete',
                    }).then((res) => {
                       if(res.code===200){
                           this.$message.success(res.msg)
                           this.getList()
                       } 
                    }).catch(err => {
                        console.log(err)
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })         
                })  
            },
            async getTagGroup() {
                 const response = await this.request({
                    url: '/bus-group/listAll',
                    method: 'get'
                }).catch((err)=> {
                    this.$message.error(err.msg)
                })
                if(response.code===200){
                    this.groupList = response.data
                } 
            },
            handleToTop (row) {
              this.request({
                url:'/bus-article/top',
                method: 'put',
                params: {
                  id: row.id,
                  topType : row.topType ===0 ? 1 : 0
                }
              }).then((res)=>{
                if(res.code === 200) {
                  this.$message.success(res.msg)
                  this.getList()
                }
              }).catch((error)=>{
                console.log(error)
              })
            },
            setRecommend(row) {
                this.request({
                    url:'/bus-article/recommend',
                    method: 'put',
                    params: {
                        id: row.id,
                        recommendType: row.recommendType===0 ? 1 : 0
                    }
                }).then((res)=>{
                    if(res.code === 200) {
                        this.$message.success(res.msg)
                        this.getList()
                    }
                }).catch((error)=>{
                    console.log(error)
                })
            }
        }
    }
</script>
<style lang="scss">
    @import "../../../styles/mixin";
    .banner-container{
        .avatar-uploader .el-upload{
            width: 120px;
            height: 120px;
            line-height: 118px;
        }
    }
    .activity-img{
        @include flex;
        @include center;
        min-height: 60px;
        img{
            width:100%;
            height: 100%;
            max-width: 60px;
            max-height: 60px;
        }
    }
    .el-row{
        margin-bottom: 12px;
    }
    .resourceImg{
        width: 60px;
        height: 60px;
    }
    // .spanName{
    //     float: left;
    //     width: 60%;
    //     // position: relative;
    //     // bottom: 25px;
    // }
</style>
